<template>
	<view class="side" :style="'left: '+left+'%;'">
		<view class="side_mask" @click="close"></view>
		<view class="side_main">
			<view class="side_main_close" @click="close">
				<rui-icons icon="close" size="40"></rui-icons>
			</view>
			<rui-side-user @change="exchange"></rui-side-user>
			<rui-side-promo :list="list" @tab="onTab" @change="onPages" :status="status" :current="params.current"></rui-side-promo>
			<view class="side_logout" @click="logout">
				<rui-icons icon="logout"></rui-icons>退出登录
			</view>
		</view>
		
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue"

	import {
		apiGetPromoInfo,
		apiGetPromoList,
		apiExchange
	} from "@/common/api.js"
	

	import Push from "@/util/push.js"
	
	import {
		userStore,
		chatStore,
	} from "@/store/index.js"
	
	const push = new Push();
	const user = userStore();
	const chat = chatStore();

	let left = ref(-100)
	let info = ref({})
	let params = ref({
		limit: 5,
		page: 1,
		current: 0
	})
	let list = ref([])
	let status = ref("not")
	
	const exchange = (content) => {
		apiExchange({content}).then(res => {
			user.setMsg(res.data.msg)
			user.setUser(res.data.user)
			uni.showToast({
				title: res.msg,
				success() {
					close()
				}
			})
		})
	}

	const open = () => {
		left.value = 0;
		if(user.isLogin) {
			apiGetPromoInfo().then(res => {
				user.setPromoInfo(res.data)
			})
			getList()
		}
		
	}

	const getList = () => {
		apiGetPromoList(params.value).then(res => {
			list.value = res.data.list
			let page = Math.ceil(res.data.count / params.value.limit);
			status.value = params.value.page >= page ? 'not' : 'next';
		})
	}

	const onPages = () => {
		if(status.value == 'not') return ;
		params.value.pages++
		getList()
	}
	
	const onTab = (e) => {
		params.value.current = e
		getList()
	}
	
	const logout = () => {
		uni.showToast({
			title: "退出成功",
			success() {
				//关闭边栏
				close()
				//清空store
				user.logout()
				chat.clear()
				//清空推广列表
				list.value = []
				//关闭网络连接
				push.close()
			}
		})
		
	}

	const close = () => {
		left.value = -100
	}

	defineExpose({
		open,
		close
	})
</script>
<style lang="scss" scoped>
	.side {
		position: fixed;
		width: 100%;
		height: 100%;
		left: -100%;
		top: 0;
		z-index: 999;
		transition: all 0.2s;

		&_logout{
			position: absolute;
			bottom: 50rpx;
			left: 50%;
			transform: translate(-50%);
		}
		&_mask {
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0);
			top: 0;
			right: 0;
			z-index: -1;
		}

		&_main {
			position: absolute;
			width: 80%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 9;
			background: #fff;
			box-shadow: 0 0 25rpx rgba(0, 0, 0, .1);

			&_close {
				position: absolute;
				top: 30rpx;
				right: 20rpx;
			}
		}

	}
</style>